 <template>
   <view>
     <div class="goods-list-container">
       <view class="goods-list">
         <view v-for="(item, i) in goodsList" :key="i" @click="toGoodsDetailPage(item.goods_id)">
           <goods-item :goods="item"></goods-item>
         </view>
       </view>
     </div>
   </view>
 </template>

 <script>
   export default {
     data() {
       return {
         // 请求参数对象
         queryObj: {
           query: "",
           cid: "",
           pagenum: 1,
           pagesize: 10,
         },
         // 商品列表
         goodsList: [],
         // 总数量
         total: 0,
         // 节流阀
         isloading: false
       };
     },

     methods: {
       // 获取商品数据
       async getGoodsList(cb) {
         this.isloading = true
         const {
           data: res
         } = await uni.$http.get("/api/public/v1/goods/search")
         this.isloading = false
         cb && cb()
         // 请求失败
         if (res.meta.status !== 200) {
           return uni.$showMsg()
         }
         // 请求成功
         this.goodsList = [...this.goodsList, ...res.message.goods]
         this.total = res.message.total
         uni.$showMsg("数据请求成功！")
       },

       // 跳转到商品详情页
       toGoodsDetailPage(id) {
         uni.navigateTo({
           url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
         });
       }
     },

     onLoad(options) {
       this.queryObj.query = options.query || "";
       this.queryObj.cid = options.cid || "";
       this.getGoodsList()
     },

     onReachBottom() {
       // 数据加载完毕
       if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg("数据加载完毕")

       if (this.isloading) return
       // 页码值加1
       this.queryObj.pagenum++;
       // 重新获取数据
       this.getGoodsList()
     },

     onPullDownRefresh() {
       // 重置关键数据
       this.queryObj.pagenum = 1;
       this.total = 0;
       this.goodsList = [];
       this.getGoodsList(() => uni.stopPullDownRefresh())
     }
   }
 </script>

 <style lang="scss">
   .goods-list-container {
     .goods-list {}
   }
 </style>